<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="header::head-fragment('鼎联科技-首页','index')">
</head>

<body>
    <!-- <header th:replace="header::header-fragment"></header> -->
    <content id="content">
        <nav th:replace="header::nav-fragment"></nav>
        <div id="banner">
            <div class="all-sort-list">
                <th:block th:each="category : ${categories}">
                    <div class="item">
                        <h3><span>·</span>
                            <a href="##">
                                <th:block th:text="${category.categoryName}"></th:block>
                            </a>
                        </h3>
                        <div class="item-list clearfix">
                            <div class="subitem">
                                <th:block th:each="secondLevelCategory : ${category.secondLevelCategoryVOS}">
                                    <dl class="fore1">
                                        <dt><a href="#">
                                                <th:block th:text="${secondLevelCategory.categoryName}"></th:block>
                                            </a></dt>
                                        <dd>
                                            <th:block th:each="thirdLevelCategory : ${secondLevelCategory.thirdLevelCategoryVOS}">
                                                <em><a href="#"
                                                        th:href="@{'/search?goodsCategoryId='+${thirdLevelCategory.categoryId}}">
                                                        <th:block th:text="${thirdLevelCategory.categoryName}">
                                                        </th:block>
                                                    </a></em>
                                            </th:block>
                                        </dd>
                                    </dl>
                                </th:block>
                            </div>
                        </div>
                    </div>
                </th:block>
            </div>
            <div class="swiper-container fl">
                <div class="swiper-wrapper">
                    <!-- 配置了轮播图则显示后台配置的轮播图 -->
                    <th:block th:unless="${#lists.isEmpty(carousels)}">
                        <th:block th:each="carousel : ${carousels}">
                            <div class="swiper-slide">
                                <a th:href="@{${carousel.redirectUrl}}">
                                    <img th:src="@{${carousel.carouselUrl}}" alt="">
                                </a>
                            </div>
                        </th:block>
                    </th:block>
                    <!-- 未配置轮播图则显示默认的三张轮播图 -->
                    <th:block th:if="${#lists.isEmpty(carousels)}">
                        <div class="swiper-slide">
                            <img th:src="@{/static/image/swiper/banner01.jpg}" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img th:src="@{/static/image/swiper/banner02.jpg}" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img th:src="@{/static/image/swiper/banner03.jpg}" alt="">
                        </div>
                    </th:block>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <!-- 已配置热销商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(hotGoodses)}">
            <div id="sub_banner">
                <th:block th:each="hotGoodse : ${hotGoodses}">
                    <div class="hot-image">
                        <a th:href="@{'/goods/detail/'+${hotGoodse.goodsId}}">
                            <img th:src="@{${hotGoodse.goodsCoverImg}}" th:alt="${hotGoodse.goodsName}">
                        </a>
                    </div>
                </th:block>
            </div>
        </th:block>
        <th:block th:unless="${#lists.isEmpty(newGoodses)}">
            <div id="flash">
                <h2>新品上线</h2>
                <ul>
                    <!-- 已配置新品则显示配置内容 -->
                    <th:block th:each="newGoods : ${newGoodses}">
                        <li>
                            <a th:href="@{'/goods/detail/'+${newGoods.goodsId}}">
                                <img th:src="@{${newGoods.goodsCoverImg}}" th:alt="${newGoods.goodsName}">
                                <p class="name" th:text="${newGoods.goodsName}">NewBeeMall</p>
                                <p class="discount" th:text="${newGoods.goodsIntro}">NewBeeMall</p>
                                <p class="item_price" th:text="${newGoods.sellingPrice}">NewBeeMall</p>
                            </a>
                        </li>
                    </th:block>
                </ul>
            </div>
        </th:block>
        <!-- 已配置推荐商品则显示配置内容 -->
        <th:block th:unless="${#lists.isEmpty(wxAccouts)}">
            <th:block th:each="wxAccount : ${wxAccouts}">
                <div class="recommend">
                    <h2 th:text="${wxAccount.name}"></h2>
                    <a th:href="@{'/'+${wxAccount.appId}+'/search'}" class="more">查看更多>></a>
                    <th:block th:unless="${#lists.isEmpty(wxAccount.items)}">
                        <ul>
                            <th:block th:each="news : ${wxAccount.items}">
                                <li>
                                    <a th:href="${news.url}">
                                        <!-- <div class="info discount" th:text="${news.author}"></div> -->
                                        <img th:src="${news.thumbUrl}" th:alt="${news.author}">
                                        <p class="name" th:text="${news.title}"></p>
                                        <div class="comment">
                                            <p th:text="${#dates.format(news.updateTime, 'yyyy-MM-dd HH:mm')}"></p>
                                            <p th:text="${news.author}"></p>
                                        </div>
                                    </a>
                                </li>
                            </th:block>
                        </ul>
                    </th:block>
                </div>
            </th:block>
        </th:block>
    </content>
    <div th:replace="footer::footer-fragment"></div>
    <!-- jQuery -->
    <script th:src="@{/static/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/static/js/search.js}" type="text/javascript"></script>
    <!-- jQuery UI 1.11.4 -->
    <script th:src="@{/static/plugins/jQueryUI/jquery-ui.min.js}"></script>
    <!-- Bootstrap 4 -->
    <script th:src="@{/static/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/static/js/swiper.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/plugins/sweetalert/sweetalert.min.js}"></script>
    <script th:src="@{/static/js/index.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/search.js}" type="text/javascript"></script>
</body>

</html>